<!DOCTYPE html>
<html lang="utf-8" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title></title>
    <!-- 引入 WeUI -->
    <link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
    <link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">
    <link rel="stylesheet" href="//longbill.github.io/jquery-date-range-picker/dist/daterangepicker.css">
    <link rel="stylesheet" href="./component/mescroll/mescroll.min.css">
    <style type="text/css">
        body{
            height: 100%;
        }
        .container, .page {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

        .weui-msg {
            padding-top: 36px;
            text-align: center;
        }


        .number-password{

        }


        .deny{
            color: #6B6464;
        }

        .mescroll-totop {
            z-index: 9990;
            position: fixed;
            right: 10px;
            bottom: 60px;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            opacity: 0;
        }

        .green-background{
            background-color: #1aad19;
        }

        .weui-popup__container--visible .weui-popup__overlay {
            opacity: 1;
        }
        /* .big-wid{
            width: 90%;
        } */
    </style>
</head>
<body>
    <!-- loading toast -->
    <div id="loadingToast" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast" style="visibility:visible;opacity: 100">
            <i class="weui-loading weui-icon_toast"></i>
            <p class="weui-toast__content">数据加载中</p>
        </div>
    </div>
    <div class="container" id="container">
        <div class="page tabbar js_show">
            <div class="page__bd" style="position:relative;height: 100%;">
                <div style="position: relative;height:6%;background-color:#f7f7f8">
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <p id="dateTimeP"></p>
                        </div>
                        <div class="weui-cell__ft"><p>
                            <a   id="changePasswordA" style="color:#000" href="javascript:;" >修改密码</a>
                        </div>

                        <div id="forgetPasswordDiv" class="weui-cell__ft"><p>
                            <i   class="weui-icon-info-circle"></i>
                        </div>
                    </div>
                </div>
                <div style="position: relative;height:1%;"></div>

                <div class="weui-tab" style="height:93%;">
                    <div class="weui-tab__panel mescroll weui-msg" >
                        <div id="openDoorDiv" class="weui-msg__icon-area" style="margin-top: 20%;">
                            <img src="./images/open_door.png" alt="">
                        </div>
                        <div class="weui-msg__text-area">
                            <h2 class="weui-msg__title">远程开锁</h2>
                        </div>
                    </div>

                    <div class="weui-tabbar" style="z-index:5;">
                        <a href="../deviceInfo" class="weui-tabbar__item" data-tab="firstTab">
                                          <span style="display: inline-block;position: relative;">
                                              <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon"/>
                                              <!--<span class="weui-badge" style="position: absolute;top: -2px;right: -13px;">8</span>-->
                                          </span>
                            <p class="weui-tabbar__label">设备信息</p>
                        </a>
                        <a href="../deviceEvent" class="weui-tabbar__item" data-tab="secondTab">
                            <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon"/>
                            <p class="weui-tabbar__label">设备事件</p>
                        </a>
                        <a href="../deviceManage" class="weui-tabbar__item" data-tab="thirdTab">
                            <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon"/>
                            <p class="weui-tabbar__label">设备维护</p>
                        </a>
                        <a href="javascript:;" class="weui-tabbar__item  weui-bar__item_on" data-tab="fourthTab">
                            <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon"/>
                            <p class="weui-tabbar__label">远程开锁</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>

<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="//cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js"></script>
<script type="text/javascript" th:inline="javascript">


    $(document).ready(function(){

        // 限制只能输入数字
        $("body").on('keypress', ".number-password",function(key) {
            if(key.charCode < 48 || key.charCode > 57) return false;
        });




        var $loadingToast = $("#loadingToast");
        function showLoading(){
            if ($loadingToast.css('display') != 'none') return;
            $loadingToast.fadeIn(100);
        }


        function hideLoading(millSeconds){
            if (millSeconds) {
                $loadingToast.fadeOut(millSeconds);
            } else {
                $loadingToast.fadeOut(100);
            }
        }


        //获取jsTicket
        function getJsTicket(){
            $.ajax({
                type: "POST",
                url: "/getJsTicketSignuature",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({"url":location.href}),
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: data.appId, // 必填，公众号的唯一标识
                        timestamp: data.timestamp, // 必填，生成签名的时间戳
                        nonceStr: data.noncestr, // 必填，生成签名的随机串
                        signature: data.signature,// 必填，签名，见附录1
                        jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                    });

//                    wx.checkJsApi({
//                        jsApiList: ['scanQRCode'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
//                        success: function(res) {
//                            // 以键值对的形式返回，可用的api值true，不可用为false
//                            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
//                            console.log(res)
//                        }
//                    });
                },
                error: function (message) {
                    $("#request-process-patent").html("提交数据失败！");
                }
            });
        }
        getJsTicket();




        //检查当前用户是否已经绑定了智能锁，如果未绑定则提示绑定.
        function getMyDevice(){
            //2 查出数据
            $.ajax({
                type: "get",
                url: "/myDevice",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    if (data.success == "true") {
                        var device = data.data;
                        if (device == null || device.deviceId == '' || device.deviceId == null) {
                            //弹框提示用户尚未绑定智能锁
                            $.modal({
                                title: "尚未绑定智能锁",
                                text: "跳转到设备绑定界面",
                                buttons: [
                                    { text: "确定", className: "default", onClick: function(){ location.href="../deviceBind"} },
                                ]
                            });
                        }
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    var responseData = JSON.parse(XMLHttpRequest.responseText);
                    $.toast(responseData.exceptionObj.message,"text")
                }
            });
        }
        getMyDevice();


        //获取智能锁远程操作状态，判断当前是否有开锁请求，如果有则弹出提示框让用户处理
        function remoteControlDoor(){
            showLoading();
            //2 查出数据
            $.ajax({
                type: "get",
                url: "/getMyLockRemoteControl",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    if (data.success == "true") {
                        var lockRemoteControl = data.data;
                        var now = new Date();
                        if (lockRemoteControl != null ) {
                            //当智能锁未被操作，并且时间为超过5分钟，
                            if (!lockRemoteControl.operated) {
                                if ((now.getTime() - lockRemoteControl.requestTime) < 300000) {
                                    $.modal({
                                        title: "远程开锁",
                                        text: '<p class="weui-prompt-text">开锁密码</p><input type="password"  maxlength="6" class="weui-input weui-prompt-input number-password" id="weui-prompt-input-door-password" placeholder="6位数字密码" value="">',
                                        autoClose: false,
                                        buttons: [
                                            { text: "拒绝", className:"weui-btn_warn deny",onClick: function(){
                                                    var passwordVal = $("#weui-prompt-input-door-password").val();
                                                    if (passwordVal.length != 6) {
                                                        $.toast("密码须是6位数字", "forbidden");
                                                        return;
                                                    }
                                                    doOpenDoor(false, passwordVal);
                                                    $.closeModal();
                                                }
                                            },
                                            { text: "允许", className:"weui-btn_primary deny", onClick: function(){
                                                    var passwordVal = $("#weui-prompt-input-door-password").val();
                                                    if (passwordVal.length != 6) {
                                                        $.toast("密码须是6位数字", "forbidden");
                                                        return;
                                                    }
                                                    //
                                                    doOpenDoor(true, passwordVal)
                                                    $.closeModal();
                                                }
                                            },
                                            { text: "关闭", className:"default", onClick: function(){
                                                    $.closeModal();
                                                }
                                            },
                                        ]
                                    });
                                } else {
                                    $.modal({
                                        title: "远程开锁",
                                        text: "操作超时，请在智能锁终端，重新发起远程开锁请求",
                                        input: '输入框默认值',
                                        buttons: [
                                            { text: "确定", onClick: function(){ console.log(1)} }
                                        ]
                                    });
                                }
                            } else {

                                $.modal({
                                    title: "远程开锁",
                                    text: "没有开锁请求或已操作",
                                    buttons: [
                                        { text: "确定", onClick: function(){ console.log(1)} }
                                    ]
                                });
                            }
                        }
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    var responseData = JSON.parse(XMLHttpRequest.responseText);
                    $.toast(responseData.exceptionObj.message,"text")
                },
                complete: function () {
                    hideLoading();
                }
            });
        }
//        getMyLockRemoteControl();

        //请求是否是从发的模板消息点击过来的，如果是则直接弹出操作框。
        var notification = [[${notification}]];
        if (notification) {
            remoteControlDoor();
        }

        //操作远程开锁
        function doOpenDoor(allowed, password){
            var obj = {"allowed":allowed, "password":password};
            $.ajax({
                type: "post",
                url: "/remoteControlOpDoor",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data:JSON.stringify(obj),
                success: function (data) {
                    if (data.success == "true") {
                        var device = data.data;
                        if (device == null || device.deviceId == '' || device.deviceId == null) {
                            //弹框提示用户操作成功.
                            $.toast("操作成功");
                            setTimeout("wx.closeWindow();",3000)

                        }
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    var responseData = JSON.parse(XMLHttpRequest.responseText);
                    $.toast(responseData.exceptionObj.message,"text")
                }
            });
        }

        //修改密码监听事件.
        $("#changePasswordA").on('click', function(){
            showLoading();
            var latestOpenDoorEvent = getLatestOpenDoorEvent();
            hideLoading();
            var now = new Date();
            //上次开门事件在五分钟之内，所以不需要输入重复密码
            if (latestOpenDoorEvent != null && (now.getTime() - latestOpenDoorEvent.createTime) < 300000) {

                //需要输入原密码
                $.modal({
                    title: "密码重置",
                    text:  '<input type="password"  maxlength="6" class="weui-input weui-prompt-input number-password" id="weui-prompt-input-door-reset-new-password" placeholder="新6位数字密码" value="">' +
                           '<input type="password"  maxlength="6" class="weui-input weui-prompt-input number-password" id="weui-prompt-input-door-reset-repeat-password" placeholder="重复密码" value="">',
                    autoClose: false,
                    buttons: [
                        { text: "取消", className:"default", onClick: function(){
                            $.closeModal();
                        }
                        },
                        { text: "确定", className:"weui-btn_primary deny", onClick: function(){
                                var passwordVal = $("#weui-prompt-input-door-reset-new-password").val();
                                var repeatPasswordVal = $("#weui-prompt-input-door-reset-repeat-password").val();
                                if (passwordVal != repeatPasswordVal) {
                                    $.toast("两次密码不匹配", "forbidden");
                                    return;
                                }
                                if (passwordVal.length != 6) {
                                    $.toast("密码须是6位数字", "forbidden");
                                    return;
                                }
                                var passwordObj = {"newPassword":passwordVal};
                                $.ajax({
                                    type: "post",
                                    url: "/resetPassword",
                                    contentType: "application/json; charset=utf-8",
                                    dataType: "json",
                                    data:JSON.stringify(passwordObj),
                                    success: function (data) {
                                        if (data.success == "true") {
                                            $.toast("操作成功");
                                        }
                                    },
                                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                                        var responseData = JSON.parse(XMLHttpRequest.responseText);
                                        $.toast(responseData.exceptionObj.message,"text")
                                    }
                                });
                                $.closeModal();
                            }
                        }
                    ]
                });
            } else {
                //需要输入原密码
                $.modal({
                    title: "修改密码",
                    text: '<input type="password"  maxlength="6" class="weui-input weui-prompt-input number-password " id="weui-prompt-input-door-old-password" placeholder="原6位数字密码" value="">' +
                        '<input type="password"  maxlength="6" class="weui-input weui-prompt-input number-password" id="weui-prompt-input-door-new-password" placeholder="新6位数字密码" value="">' +
                        '<input type="password"  maxlength="6" class="weui-input weui-prompt-input number-password" id="weui-prompt-input-door-repeat-password" placeholder="重复密码" value="">',
                    autoClose: false,
                    buttons: [
                        { text: "取消", className:"default", onClick: function(){
                            $.closeModal();
                        }
                        },
                        { text: "确定", className:"weui-btn_primary deny", onClick: function(){
                                var oldPasswordVal = $("#weui-prompt-input-door-old-password").val();
                                var passwordVal = $("#weui-prompt-input-door-new-password").val();
                                var repeatPasswordVal = $("#weui-prompt-input-door-repeat-password").val();
                                if (passwordVal != repeatPasswordVal) {
                                    $.toast("两次密码不匹配", "forbidden");
                                    return;
                                }
                                if (passwordVal.length != 6 || oldPasswordVal.length != 6) {
                                    $.toast("密码须是6位数字", "forbidden");
                                    return;
                                }
                                var passwordObj = {"oldPassword":oldPasswordVal, "newPassword":passwordVal};
                                $.ajax({
                                    type: "post",
                                    url: "/changePassword",
                                    contentType: "application/json; charset=utf-8",
                                    dataType: "json",
                                    data:JSON.stringify(passwordObj),
                                    success: function (data) {
                                        if (data.success == "true") {
                                            $.toast("操作成功");
                                        }
                                    },
                                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                                        var responseData = JSON.parse(XMLHttpRequest.responseText);
                                        $.toast(responseData.exceptionObj.message,"text")
                                    }
                                });
                                $.closeModal();
                            }
                        }
                    ]
                });
            }
        });

        //获取最近的一次开门事件
        function getLatestOpenDoorEvent(){
            var event = null;
            //2 查出数据
            $.ajax({
                type: "get",
                url: "/getLatestOpenDoorEvent",
                contentType: "application/json; charset=utf-8",
                async:false,
                dataType: "json",
                success: function (data) {
                    if (data.success == "true") {
                        event = data.data;
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    var responseData = JSON.parse(XMLHttpRequest.responseText);
                    $.toast(responseData.exceptionObj.message,"text")
                }
            });
            return event;
        }
        //忘记密码的提示
        $("#forgetPasswordDiv").on('click', function () {
            $.alert({
                title: '忘记密码',
                text: '如果您忘记了密码，请开关门一次，再次点击"修改密码"来重置密码',
                onOK: function () {
                    //点击确认
                }
            });
        });

        //点击远程开锁按钮,执行开锁操作.
        $("#openDoorDiv").on('click', function () {
            remoteControlDoor();
        });

    });
</script>

</html>
